<template>
  <div class="page-container page-container-detail-page">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>其他类促销</el-breadcrumb-item>
        <el-breadcrumb-item>换购促销详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--审核弹框-->
    <el-dialog
      title="管理员备注"
      class="el-dialog-style"
      :visible.sync="dialogVisibleAdmin"
      :close-on-click-modal="false"
    >
      <el-form
        :model="adminDataForm"
        label-width="100%"
        :size="size"
        label-position="right"
        inline
        ref="adminDataForm"
        :rules="adminDataFormRules"
      >
        <el-form-item class="textarea" prop="auditRemark">
          <div style="width:100%;">
            <el-input clearable
                      type="textarea"
                      placeholder="请输入备注"
                      v-model="adminDataForm.auditRemark"
                      :rows="4" >
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          :size="size"
          @click.native="submitFormAdminNotPass"
          class="cancelButton"
        >不通过</el-button
        >
        <el-button :size="size" class="searchButtton" @click.native="submitFormAdmin"
        >通过</el-button
        >
      </div>
    </el-dialog>

    <!--保存模板弹窗-->
    <el-dialog
      title="添加模板"
      class="el-dialog-style"
      :visible.sync="templateDialogVisible"
      v-if="templateDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="templateDataForm"
        :size="size"
        ref="templateDataForm"
        :rules="templateDataFormRules"
        label-width="130px"
      >
        <el-form-item label="模板名称：" prop="templateName">
          <el-input clearable
                    placeholder="输入模板名称"
                    v-model="templateDataForm.templateName" maxlength="60"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelButton" :size="size" @click="templateDialogVisible = false"
        >取消</el-button
        >
        <el-button :size="size" class="searchButton" @click.native="saveTemplate"
        >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="查看换购商品"
      :inline="true"
      :visible.sync="giftProductVisible"
      :close-on-click-modal="false"
    >
      <div class="flex">
        <el-form
          :model="seeGiftProductForm"
          ref="seeGiftProductForm"
          :size="size"
          inline
        >

          <el-form-item label="商品名称：" prop="mpName">
            <el-input clearable
                      v-model="seeGiftProductForm.mpName"
                      auto-complete="off" placeholder="商品名称" maxlength="80"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品编号：" prop="mpCode">
            <el-input clearable
                      v-model="seeGiftProductForm.mpCode"
                      auto-complete="off"  placeholder="商品编号" maxlength="80"
            ></el-input>
          </el-form-item>

          <div class="t_r mb30">
            <el-button
              class="resetButton"
              icon="el-icon-refresh"
              size="mini"
              @click="resetForm('seeGiftProductForm')"
            >重置</el-button
            >
            <el-button class="searchButton" size="mini" @click="checkPro(null)" icon="el-icon-search">搜索</el-button>
            
          </div>
        </el-form>
      </div>
      <div >
        <el-table :data="giftProductTableData" >
          <el-table-column
            prop="code"
            label="商品编码"
            align="center"
            key="2"
            width="320"
          ></el-table-column>
          <el-table-column
            prop="chineseName"
            label="商品名称"
            align="center"
            key="4"
            width="320"
          ></el-table-column>
          <el-table-column
            prop="goodsCategory"
            label="商品分类"
            align="center"
            key="3"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="storeName"
            label="所属店铺"
            align="center"
            key="6"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="channelStoreLimit"
            label="店铺限购"
            align="center"
            key="7"
            width="200"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.channelStoreLimit || '-'}}</span>
<!--              <el-input clearable-->
<!--                        disabled="true"-->
<!--                        v-model="scope.row.channelStoreLimit"-->
<!--                        @blur="updateGiftItem(scope.row)"-->
<!--              />-->
            </template>
          </el-table-column>
          <el-table-column
            prop="channelIndividualLimit"
            align="center"
            label="个人限购"
            key="8"
            width="200"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.individualLimit || '-'}}</span>
<!--              <el-input clearable-->
<!--                        v-model="scope.row.individualLimit"-->
<!--                        disabled="true"-->
<!--                        @blur="updateGiftItem(scope.row)"-->
<!--              />-->
            </template>
          </el-table-column>
          <el-table-column
            prop="salePrice"
            label="原价"
            align="center"
            key="9"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="stock"
            label="库存"
            align="center"
            key="15"
            width="200"
          ></el-table-column>
          <el-table-column prop="giftNum" label="换购价" align="center" key="10" width="200">
            <template slot-scope="scope" prop="upgradeAmount" align="center">
              <span>{{ scope.row.upgradeAmount || '-'}}</span>
<!--              <el-input clearable-->
<!--                        disabled="true"-->
<!--                        v-model="scope.row.upgradeAmount"-->
<!--                        @blur="updateGiftItem(scope.row)"-->
<!--              ></el-input>-->
            </template>
          </el-table-column>
        </el-table>

        <div class="toolbar t_r"  >
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChangeForSeeGiftProduct"
            :current-page="seeGiftProductForm.start"
            :page-size="seeGiftProductForm.limit"
            :total="seeGiftProductTableDataSize"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChangeForSeeGiftProduct"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="giftProductVisible = false"
                  class="cancelButton">取消</el-button
        ></div>
    </el-dialog>

    <!--工具栏-->
    <div class="page-container-detail">
      <p class="pageName">换购促销详情</p>
      <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
          <el-form-item>
            <span class="color333 font18">活动名称：</span>
            <span class="color333 font18">{{ activityData.promName }}</span>
          </el-form-item>
          <el-form-item>
            <span class="color333 font18">活动ID：</span>
            <span class="color333 font18">{{ activityData.promotionCode }}</span>
          </el-form-item>
          <el-form-item>
            <span class="color333 font18">当前状态：</span>
            <span class="color333 font18" v-if="activityData.status == 9"
            >草稿状态</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 1"
            >待提交</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 2"
            >待审核</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 3"
            >未开始</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 4"
            >审核不通过</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 5"
            >进行中</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 6"
            >已过期</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 7"
            >已关闭</span
            >
            <span class="color333 font18" v-else-if="activityData.status == 8"
            >已结束</span
            >
            <span class="color333 font18" v-else>未知状态</span>
          </el-form-item>
        </el-form>
        <el-form
          :inline="true"
          :model="filters"
          :size="size"
          ref="filters"
          v-if="activityData.editFlag"
        >
          <el-row class="search-button">
            <!--<el-button type="primary">查看营销报告</el-button>-->
            <span v-if="activityData.status == 2 || activityData.status == 4">
              <div >
                <kt-button
                  type="primary"
                  :size="size"
                  @click="shenheHuodong(1)"
                  perms="market:increase:verify"
                  label="审核"
                  class="searchButton"
                />
              </div>
            </span>
            <span v-if="activityData.status == 1">
              <div >
                <kt-button
                  type="primary"
                  :size="size"
                  @click="shenheHuodong(0)"
                  perms="market:increase:submit"
                  label="提交审核"
                  class="searchButton"
                />
              </div>
            </span>
            <span>
              <div>
                <kt-button
                  type="primary"
                  class="resetButton"
                  :size="size"
                  @click="templateDialogVisible = true"
                  label="保存模板"
                  perms="market:increase:addtemp"
                />
              </div>
            </span>
          </el-row>
        </el-form>
      </div>
      <div class="tab-container tab-container-noPadding">
        <!-- <el-alert
          :closable="false"
          style="background-color: #ffffff;color: #ffffff;"
          title=""
          type="success"
        /> -->
        <el-tabs type="border-card">
          <el-tab-pane label="促销规则">
            <div>
              <form class="form-horizontal ">
                <div class="basicInfo">基本设置：</div>
                <div class="form-group">
                  <!--活动名称-->
                  <label
                    class="color333 font16 ml8"
                    ng-show="promotionDetailContent.promotionMethod != 17"
                  >活动名称：
                  </label>
                  <div class="color333">{{ activityData.promName }}</div>
                </div>
                <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div> -->
                <div class="form-group">
                  <!--活动时间-->
                  <label class="color333 font16 ml8">活动时间：</label>
                  <div class="color333">
                    {{ activityData.startTime }} 至 {{ activityData.endTime }}
                  </div>
                </div>
                <div class="form-group">
                  <label class="color333 font16 ml8">活动标签：</label>
                  <div class="color333">{{activityData.tagName}}</div>
                </div>

                <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div> -->
                <div class="basicInfo">
                  活动规则：
                </div>
                <div class="form-group ng-scope">
                  <!--活动类型(促销类型)-->
                  <label class="color333 font16 ml8">活动类型：</label>
                  <div class="color333">
                    {{ getFrontPromType(activityData.frontPromType) }}
                  </div>
                </div>
                <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div> -->
                <div class="form-group">
                  <label class="color333 font16 ml8">优惠设置：</label>
                  <div class="color333 oh">
                    <li v-for="(item, index) in activityData.promotionRules" class="f_l mr10" :key="index">
                      买{{item.conditionValue}}
                      <span v-if="activityData.frontPromType == 15">元</span>
                      <span v-if="activityData.frontPromType == 16">件</span>
                      ，可换购
                      <span v-if="index<activityData.promotionRules.length-1">&nbsp;|&nbsp;</span>
                    </li>
                  </div>
                </div>
                <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div> -->
                <div class="form-group flexBox">
                  <label class="color333 font16 ml8 titleText">活动描述：</label>
                  <div class="color333">
                    {{ activityData.description }}
                  </div>
                </div>

                <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div> -->
                <div class="basicInfo ng-scope">
                  交易规则：
                </div>

                <div class="form-group ng-scope" >
                  <!--是否包邮-->
                  <label class="color333 font16 ml8">是否包邮：</label>
                  <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
                  <div class="color333">
                    <span v-if="activityData.parcelsFlag==0">否</span>
                    <span v-else>是</span>
                  </div>
                </div>
                <!-- <div class="line line-dashed b-b line-lg ng-scope"></div> -->
                <div class="form-group"  v-if="deptType != 3">
                  <label class="color333 font16 ml8">是否分摊：</label>
                  <div class="color333">
                    <span v-if="parseInt(activityData.costAllocationFlag) == 0">否</span>
                    <span
                      v-if="parseInt(activityData.costAllocationFlag) == 1"
                    >是</span>
                  </div>
                </div>
                <div class="form-group"  v-if="activityData.costAllocationFlag == 1 && deptType != 3">
                  <label class="color333 font16 ml8">分摊比例：</label>
                  <div class="color333">
                    <span v-if="activityData.parentAllocationScale">母平台比例：{{activityData.parentAllocationScale}}%</span>
                    <span v-if="activityData.childAllocationScale">子平台比例：{{activityData.childAllocationScale}}%</span>
                    <span v-if="activityData.merchantAllocationScale">商家比例：{{activityData.merchantAllocationScale}}%</span>
                    <span v-if="activityData.storeAllocationScale">店铺比例：{{activityData.storeAllocationScale}}%</span>
                  </div>
                </div>

                <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div> -->
                <div class="basicInfo">
                  参与条件：
                </div>
                <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div> -->
                <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
                  <!--活动渠道-->
                  <div
                    class="line line-dashed b-b line-lg"
                    ng-show="promotionDetailContent.channelCodes.length > 0"
                  ></div>
                  <div class="form-group ng-scope flexBox" v-if="this.deptType == 0">
                    <label class="color333 font16 ml8 titleText">使用渠道：</label>

                    <div class="color333">
                      <span
                        v-for="(item) in (activityData.channelCodes + '').split(',')"
                        :key="item"
                        class="ng-binding ng-scope"
                      >{{getChannelCodes(item)}} &nbsp;</span>
                      <!-- <span ng-repeat="channel in promotionDetailContent.channelCodes" class="ng-binding ng-scope">BBC &nbsp;</span> -->
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="color333 font16 ml8">新老用户：</label>
                    <div class="color333">
                      <span
                        v-for="(item) in (activityData.proUserType + '').split(',')"
                        :key="item"
                        class="ng-binding ng-scope"
                      >{{getProUserType(item)}} &nbsp;</span>
                      <!-- <span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope">新用户 &nbsp;</span> -->
                    </div>
                  </div>
                  <!-- <div class="line line-dashed b-b line-lg"></div> -->
                  <div class="form-group pdl9" v-if="activityData.memTypes != null">
                    <label class="color333 font16 ">会员类型：</label>
                    <div class="color333">
                      <span
                        v-for="item in (activityData.memTypes + '').split(
                          ','
                        )"
                        :key="item"
                        class="ng-binding ng-scope"
                      >
                        <span v-if="item == 1">
                        普通会员 &nbsp;
                        </span>
                        <span v-if="item == 2">
                        VIP会员 &nbsp;
                        </span>
                      </span>
                      <!-- <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">普通会员 &nbsp;</span> -->
                    </div>
                  </div>
                  <div class="oh mb20 pdl9">
                    <span class="color333 font16  turnInlineBlock w80  mb20">会员等级：</span>


                    <div class="color333 pdl34">
                      <div style="border:1px solid #ededed" class=" pdl30 pdt20">
                      <div
                        v-for="(item, index) in levelList "
                        :key="index"
                        class="mb10 lh25"
                      >
                        <div  style="display:flex">
                          <span class="turnInlineBlock w144 oe t_r " style="flex-shrink:0">{{item.childName}}</span>
                          <span class="turnInlineBlock">：</span>
                          <span class="turnInlineBlock ">
                            <span v-for="(level,index) in item.childLevelList.split('|')" :key="index"  class="turnInlineBlock width120 mr10 mb10" >
                               <img src="../../../../src/assets/checked.png" alt="" style="width:16px;height:16px" class="mr10">
                               {{level}}
                               <!-- <span class="turnInlineBlock" style="margin-left:5px; margin-right:5px">
                                 {{(item.childLevelList.split("|").length-1) > index ? '|' : ""}}
                               </span> -->
                            </span>
                           </span>
                        </div>
                      </div>
                      </div>
                      <!-- <span ng-repeat="channel in promotionDetailContent.channelCodes" class="ng-binding ng-scope">BBC &nbsp;</span> -->
                    </div>
                  </div><div class="form-group" v-if="activityData.memTypes != null">
                </div>
                  <!-- <div class="line line-dashed b-b line-lg ng-scope"></div> -->
                  <div class="form-group">
                    <label class="color333 font16 ml8">店铺地区：</label>
                    <div class="color333">全国</div>
                  </div>
                  <!-- <div class="line line-dashed b-b line-lg"></div> -->
                  <div class="form-group">
                    <label class="color333 font16 ml8">用户地区：</label>
                    <div class="color333">全国</div>
                  </div>

                  <div
                    class="form-group ng-scope"
                    ng-if="promotionDetailContent.promotionType != 12"
                  >
                    <!--备注-->
                    <label class="color333 font16 ml40">备注：</label>
                    <p v-html="activityData.remark">{{activityData.remark}}</p>
                  </div>
                </div>
              </form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="参与商家/店铺" @click="getMerchantOrStoreList()">
            <el-tabs type="border-card">
              <el-tab-pane label="商家">
                <el-table :data="businessList" >
                  <el-table-column prop="id" label="商家编码"></el-table-column>
                  <el-table-column
                    prop="name"
                    label="商家名称"
                  ></el-table-column>
                  <el-table-column
                    prop="type"
                    label="商家类型"
                  ></el-table-column>
                </el-table>
                <!--分页栏-->
                <div
                  class="toolbar t_r"

                  v-if="businessList.length > 0"
                >
                  <el-pagination
                    @size-change="businesshandleSizeChange"
                    @current-change="businesshandleCurrentChange"
                    :current-page="businessForm.pageNo"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="businessForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="businessListTotal"
                  >
                  </el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="店铺">
                <el-table :data="shopList" >
                  <el-table-column prop="id" label="店铺编码"></el-table-column>
                  <el-table-column
                    prop="name"
                    label="店铺名称"
                  ></el-table-column>
                  <el-table-column
                    prop="type"
                    label="店铺类型"
                  ></el-table-column>
                  <el-table-column prop="merchantName" label="所属商家"></el-table-column>
                </el-table>
                <!--分页栏-->
                <div
                  class="toolbar t_r"
                  v-if="shopList.length > 0"
                >
                  <el-pagination
                    @size-change="shophandleSizeChange"
                    @current-change="shophandleCurrentChange"
                    :current-page="shopForm.pageNo"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="shopForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="shopListTotal"
                    class="pagination"
                  >
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="参与商品">
            <el-tabs v-model="productStatusTabs">
              <el-tab-pane :label="noMutexProductLabel" name="1">
                  <el-table
                    :data="merchantProductTableData"
                    :size="size"
                    row-key="id"
                    default-expand-all
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    class="tableStyle"
                  >
<!--                    <el-table-column type="selection" width="55"></el-table-column>-->
                    <el-table-column
                      prop="mpCode"
                      label="商品编码"
                      width="180"
                      align="left"
                    ></el-table-column>
                    <el-table-column
                      prop="mpName"
                      label="商品名称"
                      width="180"
                    ></el-table-column>
                    <el-table-column
                      prop="categoryName"
                      label="商品分类"
                    ></el-table-column>
                    <el-table-column
                    prop="stock"
                    label="库存">
                    </el-table-column>
                    <el-table-column
                      prop="storeName"
                      label="所属店铺"
                    ></el-table-column>
                    <el-table-column
                      prop="salePrice"
                      label="原价（元）"
                    ></el-table-column>

                  </el-table>
                  <!--分页栏-->
                  <div class="toolbar t_r" >
                    <el-pagination
                      @size-change="handleSizeChangeMerchantProductTableData"
                      @current-change="handleCurrentChangeMerchantProductTableData"
                      :current-page="merchantProductSearchForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="merchantProductSearchForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="merchantProductTableDataTotal"
                    >
                    </el-pagination>
                  </div>
              </el-tab-pane>
              <el-tab-pane :label="mutexProductLabel" name="2">
                <div>
                  <el-table :data="mutexProductList"  row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" @selection-change="handleSelectionChange" class="tableStyle">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="mpCode" label="商品编码" width="200"  align="left"></el-table-column>
                    <el-table-column prop="mpName" label="商品名称" width="200"></el-table-column>
                    <el-table-column prop="categoryName" label="商品分类" width="200"></el-table-column>
                    <el-table-column prop="stock" label="库存" width="200"></el-table-column>
                    <el-table-column prop="salePrice" label="原价（元）" width="200"></el-table-column>
                    <el-table-column prop="storeName" label="所属店铺" width="200"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="390">
                      <template slot-scope="scope">
                    <el-button @click="getMutexInfo(scope.row)" v-if="scope.row.typeOfProduct==20" type="text" class="textButton" size="small">查看详情</el-button>
                    <el-button @click="renewAdd(scope.row)" v-if="scope.row.typeOfProduct==10 || scope.row.typeOfProduct==20" type="text" class="textButton" size="small">重新添加</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="toolbar t_r" >
                    <el-pagination
                      @size-change="handleSizeChangeMutexProductList"
                      @current-change="handleCurrentChangeMutexProductList"
                      :current-page="mutexProductForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="mutexProductForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="mutexProductTotal"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>

          <el-tab-pane label="换购商品">
            <div>
              <el-table :data="giftRuleTable" >
                <el-table-column
                  label="优惠阶梯"
                  type="index"
                  width="200px"
                ></el-table-column>
                <el-table-column label="促销规则">
                  <template slot-scope="scope">
                    <span>
                      满
                      <span>{{scope.row.conditionValue}}</span>
                      <span v-if="activityData.frontPromType == 8">
                        元
                      </span>
                      <span v-else>
                        件
                      </span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="促销赠品">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="checkPro(scope.row)"
                    >查看换购商品</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>


    <!-- 互斥活动详情 -->
    <el-dialog :visible.sync="mutexPromotionVisible" title="互斥活动详情"  :close-on-click-modal="false">
      <div>
        <el-table :data="mutexPromotionList" ref="multipleTable" :row-class-name="tableRowClassName"  :size="size">
          <el-table-column prop="promotionCode" width="280" label="互斥活动编码" sortable align="center"></el-table-column>
          <el-table-column prop="promName"  width="150" label="互斥活动名称" align="center">
            <template slot-scope="scope">
              <el-button @click="linkInfoByMutexProduct(scope.row.promotionId,scope.row.promType)" type="text" class="textButton" size="small">{{scope.row.promName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsCategory"  width="360" label="互斥活动时间" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="storeName" label="活动状态" align="center" width="200">
            <template slot-scope="scope">
              <span class="color333 font18" v-if="scope.row.status == 0">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 1">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 2">待审核</span>
              <span class="color333 font18" v-else-if="scope.row.status == 3">未开始</span>
              <span class="color333 font18" v-else-if="scope.row.status == 4">审核不通过</span>
              <span class="color333 font18" v-else-if="scope.row.status == 5">进行中</span>
              <span class="color333 font18" v-else-if="scope.row.status == 6">已过期</span>
              <span class="color333 font18" v-else-if="scope.row.status == 7">已关闭</span>
              <span class="color333 font18" v-else-if="scope.row.status == 8">已结束</span>
              <span class="color333 font18" v-else-if="scope.row.status == 9">活动草稿</span>
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="创建人" align="center" width="200"></el-table-column>
          <el-table-column prop="deptName"  label="创建组织" align="center" width="200"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
          <el-pagination
            @size-change="mutexPromotionListSizeChange"
            @current-change="mutexPromotionListCurrentChange"
            :current-page="mutexPromotionForm.start"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mutexPromotionForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mutexPromotionListTotal"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c">
        <el-button type="primary" plain :size="size" @click.native="mutexPromotionVisible = false" class="searchButton">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import { format } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { darkmagenta } from "color-name";
  import tabPane from "./components/TabPaneCreateGroupon";
  import qs from "qs";
  import {
    promTypeConverter,
    frontPromTypeConverter,
    channelCodeConverter,
    proPlatformConverter,
    proUserTypeConverter,
    proMemberTypeConverter,
    proMemberLevelConverter
  } from "@/market/dict/marketDict";
  import marketRequest from "@/market/request/marketRequest";
  export default {
    name: "Tab",
    components: {
      tabPane,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
        channelList: [{ childName: "卡奥斯运营中心", id: "179" }],
        merchantProductTableData: [],
        merchantProductTableDataTotal: 0,
        merchantProductSearchForm: {
          promotionId: this.promotionId,
          merchantId: null,
          mpCode: null,
          mpName: null,
          categoryName: null,
          start: 1,
          limit: 10
        },

        seeGiftProductTableDataSize: 0,
        giftProductVisible: false,
        giftProductTableData: [],
        currentRule: {},
        seeGiftProductForm: {
          start: 1,
          limit: 10,
          mpCode: null,
          mpName: null
        },
        giftProductForm: {
          start: 1,
          limit: 10,
          productName: "",
          productNo: "",
          barCode: "",
          chineseName: "",
          code: ""
        },
        giftRuleTable: [],
        templateDataForm: {
          templateName: null
        },
        templateDataFormRules: {
          templateName: [
            { required: true, message: "请输入模板名称",trigger:"blur" },
            { required: true, message: "请输入模板名称",trigger:"change" },
            { max: 60, message: "模板名称最多60字符", trigger: "blur" },
            { max: 60, message: "模板名称最多60字符", trigger: "change" }
          ]
        },
        templateDialogVisible: false,
        tableDataData: [],
        adminDataForm:{
          auditRemark:""
        },
        adminDataFormRules: {
          auditRemark: [
            { required: true, message: "审核意见不能为空", trigger: "blur" }
          ]
        },
        dialogVisibleAdmin: false,
        shenhe: 0,
        size: "small",
        filters: {},
        multipleSelection: [],
        giftProductEditLoading: false,
        businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
        businessListTotal: 0,
        businessForm: {
          promotionId: this.promotionId,
          merchantType: "1",
          pageNo: 1,
          pageSize: 10
        },
        shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
        shopForm: {
          promotionId: this.promotionId,
          merchantType: "2",
          pageNo: 1,
          pageSize: 10
        },
        shopListTotal: 0,
        tableData: [
          {
            id: 1912250010887324,
            productName: "新供应商001",
            unit: "件",
            shopName: "张小二服饰",
            price: 1.2,
            markdown: 1,
            shopLimit1: 100,
            shopLimit2: 100,
            shopLimit3: 100
          }
        ],
        promotionId: this.$route.params.id,
        activityData: {},


        productStatusTabs: "1",
        noMutexProductLabel:"生效商品（0）",
        mutexProductForm:{
          promotionId: this.$route.params.id,
          mutexFlag:1,//互斥标识
          start: 1,
          limit: 10
        },
        mutexProductList:[],
        mutexProductTotal:0,
        mutexProductLabel:"互斥商品（0）",
        mutexPromotionForm:{
          promotionId: this.$route.params.id,
          start:1,
          limit:10,
        },
        mutexPromotionList:[],
        mutexPromotionListTotal:0,
        mutexPromotionVisible:false,

        levelList: [],
      };
    },
    created: function() {
      this.findAllRules();
      this.getDetailById();
      this.mainMerchantFormFind();
      this.mainStoreTableDataFormFind();
      this.getMerchantProductList();
      this.getMutexProductList();
      // this.getChildList();
    },
    methods: {
      getLevelList(channelCodes){
        if(this.deptType == 0){
          //母平台
          channelCodes.split(",").forEach(item=>{
            let name = this.getChannelCodes(item);
            //获取等级
            this.activityData.promotionMemberGradeList.forEach(levelList=>{
              if(levelList.platformId == item){
                if(levelList.levelCodeList == null || levelList.levelCodeList.length < 1){
                  this.levelList.push({"childName":name,"childLevelList":"全部"})
                }else{
                  this.utils.request.queryMemLevelListByIds({ids:levelList.levelCodeList},res=>{
                    let levelRstList = []
                    res.data.forEach(level=>{
                      levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName);
                    })
                    if(item == '179'){
                      this.levelList.unshift({"childName":name,"childLevelList":levelRstList.join("|")})
                    }else{
                      this.levelList.push({"childName":name,"childLevelList":levelRstList.join("|")})
                    }
                  })
                }
              }
            })
          })
        }else{
          let user = localStorage.getItem("user");
          let userInfo = JSON.parse(user);
          if (this.activityData.promotionMemberGradeList == null || this.activityData.promotionMemberGradeList.length < 1 || this.activityData.promotionMemberGradeList[0].levelCodeList == null){
            this.levelList.push({"childName":userInfo.deptName,"childLevelList":"全部"})
          }else {
            this.utils.request.queryMemLevelListByIds({ids: this.activityData.promotionMemberGradeList[0].levelCodeList}, res => {
              let levelRstList = []
              res.data.forEach(level => {
                levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0, 5) + "..." : level.levelName);
              })
              this.levelList.push({"childName": userInfo.deptName, "childLevelList": levelRstList.join("|")})
            })
          }
        }
      },
      getDetailById(){
        let _this = this;
        let callback = res => {

          if (res.code == "0000") {
            _this.activityData = res.data;
            let getLevelListCallback = function(){
              _this.getLevelList(res.data.channelCodes);
            }
            _this.queryChildList(_this.activityData.channelCodes,getLevelListCallback);
            //根据渠道code获取
            if(res.data.channelCodes != null){
              if(res.data.channelCodes.split(",").indexOf("179") == -1){
                res.data.channelCodes = "179," + res.data.channelCodes;
              }
            }
          } else {
            //alert("获取促销详情失败");
          }
        };
        this.promotionId = this.$route.params.id;
        let params = { id: this.$route.params.id };
        this.utils.request.promotionDetailById(params, callback);
      },
      // getChildList() {
      //   this.utils.request.queryChildList({}, res => {
      //     if (res.code == "0000" && res.data && res.data.length > 0) {
      //       res.data.forEach(v => {
      //         this.channelList.push(v);
      //       });
      //     }
      //   });
      // },
      // 获取子平台列表
      queryChildList(channelCodes,callback){
        let that = this;
        this.utils.request.queryChildList({},res=>{
          if(res.code == '0000' && res.data && res.data.length > 0){
            if(null != channelCodes && channelCodes != ''){
              let channelCodesStr = channelCodes.split(',');
              channelCodesStr.forEach(item =>{
                res.data.forEach(item1 =>{
                  this.channelList.push(item1);
                  // if(item1.id == item){
                  //   that.channelList[0].children.push(item1);
                  // }
                })
              })


            }
            if (callback != null){
              callback();
            }
          }
        })
      },

      handleCurrentChangeMerchantProductTableData(pageNum) {
        this.merchantProductSearchForm.start = pageNum;
        this.getMerchantProductList();
      },
      handleSizeChangeMerchantProductTableData(val) {
        this.merchantProductSearchForm.limit = val;
        this.merchantProductSearchForm.start = 1;
        this.getMerchantProductList();
      },
      // 换页刷新
      shophandleSizeChange: function(pageSize) {
        this.shopForm.pageSize = pageSize;
        this.shopForm.pageNo = 1;
        this.mainStoreTableDataFormFind();
      },
      shophandleCurrentChange(pageNo) {
        this.shopForm.pageNo = pageNo;
        this.mainStoreTableDataFormFind();
      },
      // 换页刷新
      businesshandleSizeChange: function(pageSize) {
        this.businessForm.pageSize = pageSize;
        this.businessForm.pageNo = 1;
        this.mainMerchantFormFind();
      },
      businesshandleCurrentChange(pageNo) {
        this.businessForm.pageNo = pageNo;
        this.mainMerchantFormFind();
      },
      handleSizeChangeForSeeGiftProduct(pageSize) {
        this.seeGiftProductForm.limit = pageSize;
        this.seeGiftProductForm.start = 1;
        this.checkPro(null);
      },
      handleCurrentChangeForSeeGiftProduct(pageNum) {
        this.seeGiftProductForm.start = pageNum;
        this.checkPro(null);
      },

      // 换条数刷新
      handleSizeChangeForGiftProduct: function(pageSize) {
        this.giftProductForm.limit = pageSize;
        this.giftProductForm.start = 1;
        this.giftProductFormFind();
      },
      handleCurrentChangeForGiftProduct: function(pageNum) {
        this.giftProductForm.start = pageNum;
        this.giftProductFormFind();
      },
      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
        }
      },
      checkPro(row) {
        if (row != null) {
          this.currentRule = row;
        }
        this.giftProductVisible = true;
        let this_ = this;
        //查询promotion_gift_item 列表并赋值给
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftProductTableData = res.data.rows.map((ele, index) => {
              let item = {};
              item.id = ele.productId;
              item.code = ele.mpCode;
              item.chineseName = ele.mpName;
              item.storeName = ele.storeName;
              item.merchantName = ele.merchantName;
              item.upgradeAmount = ele.upgradeAmount;
              item.channelMerchantLimit = ele.channelMerchantLimit;
              item.channelStoreLimit = ele.channelStoreLimit;
              item.individualLimit = ele.individualLimit;
              item.itemId = ele.id;
              item.stock = ele.stock;
              item.goodsCategory = ele.goodsCategory;
              item.salePrice = ele.salePrice;
              return item;
            });
            this_.seeGiftProductTableDataSize = res.data.total;
          }
        };
        this.seeGiftProductForm.promotionId = this.promotionId;
        this.seeGiftProductForm.promotionRuleId = this.currentRule.id;
        this.seeGiftProductForm.giftType = 1;
        marketRequest.promotionGiftItemFindByPage(
          this.seeGiftProductForm,
          callback
        );
      },
      findAllRules() {
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftRuleTable = res.data;
          }
        };
        let param = {
          promotionId: this.$route.params.id,
          deleteFlag: 0
        };
        this.utils.request.promotionRuleFindAll(param, callback);
      },
      saveTemplate() {
        let this_ = this;
        this.$refs["templateDataForm"].validate(valid => {
          if (valid) {
            let callback = res => {
              if (res.code == "0000") {
                this_.$message({ message: "保存成功", type: "success" });
                this_.templateDialogVisible = false;
              } else {
                this_.$message({ message: "模板名称重复", type: "error" });
              }
            };
            this_.templateDataForm.id = this_.activityData.id;
            marketRequest.promotionSaveTemplate(this_.templateDataForm, callback);
          }
        });
      },
      submitFormAdminNotPass() {
        this.$refs.adminDataForm.validate(auditRemarkE => {
          if (auditRemarkE) {
            let this_ = this;
            this.dialogVisibleAdmin = false;

            let callback = res => {
              this_.activityData.status = 4;

            };
            this.adminDataForm.id = this.promotionId;
            this.adminDataForm.status = 4;
            this.utils.request.promotionUpdate(this.adminDataForm, callback);
            this.shenhe = 0;
          }
        });
      },
      submitFormAdmin() {
        let this_ = this;
        this.dialogVisibleAdmin = false;

        let callback = res => {
          this_.getDetailById();
        };
        this.adminDataForm.id = this.promotionId;
        this.adminDataForm.status = 11;
        this.utils.request.promotionUpdate(this.adminDataForm, callback);
      },
      resetFormSearch(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
        }
      },
      shenheHuodong(flag) {
        this.resetFormSearch("adminDataForm");
        let this_ = this;
        if (flag == 0) {
          this.$confirm("确认提交审核？", "提示", {
            type: "warning",
            closeOnClickModal: false,
          })
            .then(() => {
              let callback = res => {
                if (res.code == "0000") {
                  this_.activityData.status = 2;
                } else if (res.code == "0001") {
                  that.$message({ message: res.msg, type: "error" });
                }
              };
              let param = {};
              param.id = this.promotionId;
              param.status = 2;
              this.utils.request.reviewPromotion(param, callback);
            })
            .catch(() => {});
        } else {
          this.dialogVisibleAdmin = true;
          this.adminDataForm.auditRemark = null;
        }
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      revokeProduct() {
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.getMerchantProductList();
          } else {
            //alert("修改失败");
          }
        };
        if (this.multipleSelection.length > 0) {
          let ids = this.multipleSelection.map(item => item.id);
          this.utils.request.promotionRevokeProduct({ mpIds: ids }, callback);
        } else {
          this.$message({
            message: "操作失败, 请选择要撤出的商品",
            type: "error"
          });
        }
      },
      createPage() {
        this.$router.push("/CreatePromotion");
      },
      getProPlatform(code) {
        return proPlatformConverter(code);
      },
      getProUserType(code) {
        return proUserTypeConverter(code);
      },
      getChannelCodes(code) {
        let item = this.channelList.find(function(item, index) {
          return item.id == code;
        });
        return typeof item == "undefined" ? "" : item.childName;
      },
      getFrontPromType(code) {
        return frontPromTypeConverter(code);
      },
      getProMemberType(code) {
        return proMemberTypeConverter(code);
      },
      getProMemberLevel(code) {
        return proMemberLevelConverter(code);
      },
      getMerchantOrStoreList() {
        alert("aaa");
      },
      //查询绑定关系的商家
      mainMerchantFormFind() {
        var this_ = this;
        //let params ={"promotionId" : this.promotionId, "merchantType": "1"};
        this.businessForm.promotionId = this.promotionId;
        this.utils.request.promotionMerchantList(this.businessForm, function(
          res
        ) {
          if (res.code == "0000") {
            this_.businessList = res.data.list.map((ele, index) => {
              let merchant = {};
              merchant.id = ele.orgNumber;
              merchant.name = ele.merchantName;
              merchant.type = ele.merchantTypeManager == "1" ? "自营商家" : "第三方商户";
              return merchant;
            });
            this_.businessListTotal = res.data.totalCount;
          }
        });
      },
      //查询绑定关系的店铺
      mainStoreTableDataFormFind() {
        //let params ={"promotionId" : this.promotionId, "merchantType": "2"};
        var this_ = this;
        this.shopForm.promotionId = this.promotionId;
        this.utils.request.promotionMerchantList(this.shopForm, function(res) {
          if (res.code == "0000") {
            this_.shopList = res.data.list.map((ele, index) => {
              let store = {};
              store.id = ele.storecode;
              store.name = ele.storename;
              store.type = ele.storeType == "1" ? "线上店铺" : "线下店铺";
              store.merchantName = ele.merchantName;
              return store;
            });
            this_.shopListTotal = res.data.totalCount;
          }
        });
      },

            /**
         * 查询生效商品
         */
        getMerchantProductList() {
          var this_ = this;
          this.merchantProductSearchForm.promotionId = this.$route.params.id;
          marketRequest.getProductListV3(this.merchantProductSearchForm, res => {
            if (res.code == "0000") {
              this_.merchantProductTableData = res.data.rows;
              this_.merchantProductTableDataTotal = res.data.total;
              if(this_.merchantProductTableDataTotal>9999){
                this_.noMutexProductLabel = "生效商品（9999+）";
              }else{
                this_.noMutexProductLabel = "生效商品（"+res.data.totalCount+"）";
              }
            }
          });
        },

        /**
         * 查询互斥商品
         */
        getMutexProductList() {
          var this_ = this;
          this.mutexProductForm.promotionId = this.$route.params.id;
          marketRequest.getProductListV3(this.mutexProductForm, res => {
            if (res.code == "0000") {
              this_.mutexProductList = res.data.rows;
              this_.mutexProductTotal = res.data.total;
              if(this_.mutexProductTotal>9999){
                this_.mutexProductLabel = "互斥商品（9999+）";
              }else{
                this_.mutexProductLabel = "互斥商品（"+res.data.totalCount+"）";
              }
            }
          });
        },
        /**
         * 每页条数改变触发
         */
        handleSizeChangeMutexProductList(val){
          this.mutexProductForm.limit = val;
          this.mutexProductForm.start = 1;
          this.getMutexProductList();
        },
        /**
         * 换页刷新
         */
        handleCurrentChangeMutexProductList(val){
          this.merchantProductSearchForm.start = val;
          this.getMutexProductList();
        },
        /**
         * 互斥商品查看详情
         */
        getMutexInfo(row){
          let that = this;
          this.mutexPromotionForm.promotionMerchantProductId = row.id;
          this.mutexPromotionForm.start = 1;
          this.mutexPromotionForm.limit = 10;
          this.getPromotionMutexListByProductId();
        },
        getPromotionMutexListByProductId(){
          let that = this;
          this.utils.request.getPromotionMutexListByProductId(this.mutexPromotionForm,res=>{
            if(res.code=='0000'){
                that.mutexPromotionList = res.data.rows;
                that.mutexPromotionListTotal = res.data.total;
                that.mutexPromotionVisible = true;
            }
          });
        },

        /**
         * 每页条数改变触发
         */
        mutexPromotionListSizeChange(val){

          this.mutexPromotionForm.limit = val;
          this.mutexPromotionForm.start = 1;
          this.getPromotionMutexListByProductId();
        },
        /**
         * 换页刷新
         */
        mutexPromotionListCurrentChange(val){

          this.mutexPromotionForm.start = val;
          this.getPromotionMutexListByProductId();
        },

        /**
         * 互斥商品重新添加
         */
        renewAdd(row){

          let that = this;
          let param = {};
          var productIdList = [];
          param.promotionId = row.promotionId;
          param.promotionType = 1;

          if(row.typeOfProduct == '10'){
              //spu
              row.children.forEach(item=>{
                productIdList.push(item.id);
              })
          }else if(row.typeOfProduct == '20'){
            productIdList.push(row.id);
          }
          param.productIdList = productIdList;
          this.utils.request.renewAddMutexProduct(param,res=>{
            if(res.code=='0000'){
              that.getMutexProductList();
              that.getMerchantProductList();

              let data = res.data;
              if(data.businessCode == '0001'){
                this.$message({message: data.businessMsg, type: "success"});
              }else if(data.businessCode == '0002'){
                this.$message({message:data.businessMsg, type: "error"})
              }else if(data.businessCode == '0003'){
                this.$alert(data.businessMsg, '提示', {
                  confirmButtonText: '知道了',
                  callback: action => {}
                });
              }

            }
          });
        },
        /**
         * 点击活动名称跳转详情
         */
        linkInfoByMutexProduct(promotionId,type){
          if(type == 1){
            this.$router.push({ path: "/SinglePromotionDetail/" + promotionId + "/0"});
            //this.$router.push(`/SinglePromotionDetail?id=${promotionId}&auth=0`);
          }else if(type == 2){
            this.$router.push(`/FullNumPromotionDetailNew?id=${promotionId}&auth=0`);
          }else if(type == 3){
            this.$router.push({ path: "/FullPromotionDetailNew/" + promotionId + "/0"});
            //this.$router.push(`/FullPromotionDetailNew?id=${promotionId}&auth=0`);
          }else if(type == 4){
            this.$router.push(`/SeckillDetail?promotionId=${promotionId}`);
          }else if(type == 5){
            this.$router.push({ path: "/GiftPromotionDetail/" + promotionId + "/0"});
            //this.$router.push(`/GiftPromotionDetail?id=${promotionId}&auth=0`);
          }else if(type == 6){
            this.$router.push({ path: "/ComplexPromotionInfo/" + promotionId});
          }else if(type == 7){
            this.$router.push({ path: "/XofferPromotionDetail/" + promotionId + "/0"});
            //this.$router.push(`/XofferPromotionDetail?id=${promotionId}&auth=0`);
          }else if(type == 8){
            this.$router.push({ path: "/IncreasePromotionDetail/" + promotionId + "/0"});
            //this.$router.push(`/IncreasePromotionDetail?id=${promotionId}&auth=0`);
          }else if(type == 9){
            this.$router.push(`/QueryPresellPromotion?value=${promotionId}&auth=0`);
          }else if(type == 10){
            this.$router.push("/GroupDetailPromotion?id=" + `${promotionId}`);
          }else if(type == 12){
            this.$router.push(`/QueryPromotion?value=${promotionId}&auth=0`);
          }
        }


    },
    mounted() {
      //
      //
      // var queryparam={};
      // queryparam.id = this.$route.params.id;
      // var this_ = this;
      // this.$axios.post("jic-market/patch-groupon-theme/detail",qs.stringify(queryparam)).then(res => {
      //
      //   if(res.data.code =="0000") {
      //     this_.activityData = res.data.data.rows;
      //   }
      // });
      //

      let callback2 = res => {
        if (res.code == "0000") {
          this.tableDataData = res.data.rows;
        }
      };
      var param2 = {};
      param2.promotionId = this.$route.params.id;
      param2.start = 1;
      param2.limit = 10;
      //this.utils.request.promotionMerchantProductList(param2, callback2);
    }
  };
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
  // .border {
  //   color: #666666;
  //   font-size: 16px;
  //   font-weight: bold;
  //   line-height: 28px;
  //   border-bottom: 1px solid #666666;
  //   padding-bottom: 3px;
  // }
  // .pdL10 {
  //   padding-left: 10px !important;
  // }
  // .mgB15 {
  //   margin-bottom: 15px !important;
  // }
  // .border-left {
  //   border-left: 3px #ddd solid !important;
  // }
  // .font-bold {
  //   font-weight: 700;
  // }
  // .form-group {
  //   margin-bottom: 15px !important;
  //   margin-right: -0px !important;
  //   margin-left: -0px !important;
  // }
  // .form-horizontal .control-label {
  //   padding-top: 5px;
  //   margin-bottom: 0;
  //   text-align: right;
  // }
  // .form-horizontal div {
  //   font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
  //   "Regular", "Microsoft YaHei";
  //   font-size: 12px;
  //   color: #666666;
  //   background-color: transparent;
  //   -webkit-font-smoothing: antialiased;
  //   line-height: 1;
  //   word-wrap: break-word;
  // }
  // .form-horizontal .control-label {
  //   padding-top: 3px !important;
  // }
  // .col-sm-2 {
  //   width: 16.66666667%;
  // }
  // /* .col-sm-10 {
  //       width: 83.33333333%;
  //   } */
  // .col-sm-1,
  // .col-sm-2,
  // .col-sm-3,
  // .col-sm-4,
  // .col-sm-5,
  // .col-sm-6,
  // .col-sm-7,
  // .col-sm-8,
  // .col-sm-9,
  // .col-sm-10,
  // .col-sm-11,
  // .col-sm-12 {
  //   float: left;
  // }
  // .col-xs-1,
  // .col-sm-1,
  // .col-md-1,
  // .col-lg-1,
  // .col-xs-2,
  // .col-sm-2,
  // .col-md-2,
  // .col-lg-2,
  // .col-xs-3,
  // .col-sm-3,
  // .col-md-3,
  // .col-lg-3,
  // .col-xs-4,
  // .col-sm-4,
  // .col-md-4,
  // .col-lg-4,
  // .col-xs-5,
  // .col-sm-5,
  // .col-md-5,
  // .col-lg-5,
  // .col-xs-6,
  // .col-sm-6,
  // .col-md-6,
  // .col-lg-6,
  // .col-xs-7,
  // .col-sm-7,
  // .col-md-7,
  // .col-lg-7,
  // .col-xs-8,
  // .col-sm-8,
  // .col-md-8,
  // .col-lg-8,
  // .col-xs-9,
  // .col-sm-9,
  // .col-md-9,
  // .col-lg-9,
  // .col-xs-10,
  // .col-sm-10,
  // .col-md-10,
  // .col-lg-10,
  // .col-xs-11,
  // .col-sm-11,
  // .col-md-11,
  // .col-lg-11,
  // .col-xs-12,
  // .col-sm-12,
  // .col-md-12,
  // .col-lg-12 {
  //   position: relative;
  //   min-height: 1px;
  //   padding-right: 15px;
  //   padding-left: 15px;
  // }
  // label {
  //   font-weight: normal;
  // }
  // label {
  //   display: inline-block;
  //   max-width: 100%;
  //   margin-bottom: 5px;
  //   font-weight: bold;
  // }
  // .form-group .pdt3px {
  //   padding-top: 3px;
  // }
  // .b-b {
  //   border-bottom: 1px solid #dddddd;
  // }
  // .line-dashed {
  //   border-style: dashed !important;
  //   background-color: transparent;
  //   border-width: 0;
  // }
  // .line-lg {
  //   margin-top: 15px;
  //   margin-bottom: 15px;
  // }
  // .line {
  //   width: 100%;
  //   height: 2px;
  //   margin: 10px 0;
  //   font-size: 0;
  //   overflow: hidden;
  // }
  // table {
  //   background-color: transparent;
  // }
  // table {
  //   border-spacing: 0;
  //   border-collapse: collapse;
  // }
  // .i-checks {
  //   padding-left: 0;
  //   margin-right: 15px;
  //   cursor: pointer;
  //   color: #666666;
  // }
  // .radio-inline,
  // .checkbox-inline {
  //   display: inline-block;
  //   padding-left: 20px;
  //   margin-bottom: 0;
  //   font-weight: normal;
  //   vertical-align: middle;
  //   cursor: pointer;
  // }
  // .panel-body tr {
  //   padding: 0 15px;
  // }

  .basicInfo{
    margin-left: 0px !important;
  }
  .ml8{
    margin-left: 8px !important;
  }
  .ml40{
    margin-left: 40px !important  ;
  }
  .w80{
  width:80px
}
.pdl30{
  padding-left: 30px;
}
.lh25{
  line-height: 25px;
}
.pdl60{
  padding-left: 60px;
}
.pdl15{
  padding-left: 15px;
}
.pdl9{
  padding-left: 9px;
}
.w144{
  width: 144px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.width120{
  width: 150px;
}
.mr10{
  margin-right: 10px;
}
.mb10{
  margin-bottom: 10px;
}
.ml33{
  margin-left: 33px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
.pdl34{
  padding-left: 34px;
}
</style>
